<template>
	<view class="show-pop" v-if="showpop">
		<view class="text-pop" @click="jumpTime">
			<view class="jump">
				跳过
			</view>
			<view class="time">
				{{time}}
			</view>
		</view>
		<cover-image src="/static/momo.jpeg" mode="aspectFit"></cover-image>
	</view>
	<up-sticky offset-top="0">
		<view class="p0">
			<view class="p1">
				<view :style="{height: top + 'px'}"></view>
				<view class="p2" :style="{height:height+'px'}">
					<view class="location" @click="toggleCityList">
						{{currentCity || (isLoading ? '位置...' : '选择城市')}}
						<!--{{locationData.name}} -->
						<!-- <u-icon name="arrow-down-fill" size="10"></u-icon> -->
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#666"
							stroke="none">
							<path d="M7 10l5 5 5-5z" />
						</svg>
					</view>
					<!-- 下拉弹窗 -->
					<!-- 城市列表弹窗 -->
					<div class="city-list-container" v-if="isCityListOpen">
						<div class="city-list-mask" @click="toggleCityList"></div>
						<div class="city-list-content">
							<div class="city-list-header">
								<h3>选择城市</h3>
								<button class="close-btn" @click="toggleCityList">×</button>
							</div>

							<div class="hot-cities">
								<h4>热门城市</h4>
								<div class="city-tags">
									<span v-for="city in hotCities" :key="city.adCode" @click="selectCity(city)"
										class="city-tag">
										{{ city.name }}
									</span>
								</div>
							</div>

							<div class="all-cities">
								<h4>全部城市</h4>
								<div class="city-group" v-for="(group, key) in groupedCities" :key="key">
									<div class="group-index">{{ key }}</div>
									<div class="group-cities">
										<span v-for="city in group" :key="city.adCode" @click="selectCity(city)"
											class="city-item">
											{{ city.name }}
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 下拉弹窗关闭 -->
					<view class="search">
						<u-search shape="round" actionText="" placeholder="搜索商家、活动" />
					</view>
				</view>
			</view>
			<view class="tabs">
				<u-tabs :list="show_init_list" @click="clickLabel" lineColor="#fff" :scrollable="true"
					:activeStyle="{color: '#000', fontWeight: 'bold'}" :inactiveStyle="{color: '#8E8E8E' }"
					:itemStyle="{height: '88rpx'}">
					<!-- <template #right>
							<view style="margin-right: 40rpx" @tap="show_remain">
								<u-icon name="arrow-down" size="21" bold></u-icon>
							</view>
						</template> -->
				</u-tabs>
				<!-- 文章分类展示 -->
				<view v-if="show_remain_data.length" class="show_remain">
					<view class="show_remain_child" :style="{height: '60rpx'}" @click="handleCategoryClick(0)">
						全部</view>
					<view v-for="(item, idx) in show_remain_data" :key="idx" class="show_remain_child"
						:style="{height: '60rpx'}" @click="handleCategoryClick(item)">
						{{item.categoryName}}
					</view>
				</view>
			</view>
		</view>
	</up-sticky>
	<!-- 文章展示 -->
	<view class="pubu" :style="{paddingBottom:'160rpx'}">
		<!-- <ShowIndex v-if="!listLoading && articleStore?.articleList?.objects?.length && list.length"
			:dataList="articleStore.articleListData.objects" />
		<view v-else-if="!listLoading && Array.isArray(articleStore?.articleList.objects)" class="empty-tip">
			暂无数据～
		</view>
		<view class="loading" v-show="list.length && articleStore?.articleList?.objects?.length">
			{{scrollState ? '正在加载中...' : ''}}
			
		</view> -->
		<ShowIndex v-if="!listLoading && artList.length" :dataList="artList" :key="list.length" />
		<!-- 当没有数据时显示提示 -->
		<view v-if="!listLoading && artList.length === 0" class="no-data">
			暂无数据
		</view>
		<view v-if="listLoading" class="loading">
			{{artList ? '正在加载中...' : ''}}
		</view>
	</view>
	<TabBarVue type="home" />
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		nextTick,
		watch,
		watchEffect,
		getCurrentInstance,
		computed
	} from "vue"
	import {
		onShow,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import QQMapWX from "@/libs/qqmap-wx-jssdk.js"
	import {
		MAP_KEY
	} from "@/config/config.ts"
	// import Waterfall from "@/components/Waterfall_old.vue"
	import ShowIndex from "@/components/ShowIndex.vue"
	import {
		height,
		top,
		bottom
	} from '@/utils/getMenuData'
	import {
		throttle
	} from '@/utils/throttle.ts'
	import {
		useShopStore,
		useLoginStore,
		useArticleStore,
		useArticleCategoryStore,
		areaStore
	} from '@/store'

	const shopStore = useShopStore()
	const loginStore = useLoginStore()
	const articleStore = useArticleStore()
	const deviceType = ref(null)
	const allArea = areaStore()
	const listLoading = ref(true) //加载状态
	const articleCategoryStore = useArticleCategoryStore();

	const activeCategoryId = ref(null); // 当前选中的分类ID
	const allArticles = ref([]); // 全部文章（用于筛选）
	const artList = ref([]); //展示的文章（筛选后）
	const show_remain_data = ref([]) //文章分类列表

	// 状态管理
	const currentCity = ref('');
	const isLoading = ref(false);
	const isCityListOpen = ref(false);
	const cities = ref([]);

	// 热门城市 - 添加经纬度信息
	const hotCities = [{
			id: 2,
			parentId: 1,
			adCode: '110000',
			name: '北京',
			pinyin: 'beijing',
			initial: 'B',
			// latitude: 39.9042,
			// longitude: 116.4074
		},
		{
			id: 849,
			parentId: 848,
			adCode: '310000',
			name: '上海',
			pinyin: 'shanghai',
			initial: 'S',
			// latitude: 31.2304,
			// longitude: 121.4737
		},
		{
			id: 2107,
			parentId: 2106,
			adCode: '440100',
			name: '广州',
			pinyin: 'guangzhou',
			initial: 'G',
			// latitude: 23.1291,
			// longitude: 113.2644
		},
		{
			id: 2131,
			parentId: 2105,
			adCode: '440300',
			name: '深圳',
			pinyin: 'shenzhen',
			initial: 'S',
			// latitude: 22.5431,
			// longitude: 114.0579
		},
		{
			id: 20,
			parentId: 19,
			adCode: '120000',
			name: '天津',
			pinyin: 'tianjin',
			initial: 'T',
			// latitude: 39.3434,
			// longitude: 117.3616
		},
		{
			id: 2442,
			parentId: 2441,
			adCode: '500000',
			name: '重庆',
			pinyin: 'chongqing',
			initial: 'C',
			// latitude: 29.5630,
			// longitude: 106.5516
		},
		{
			id: 989,
			parentId: 988,
			adCode: '330100',
			name: '杭州',
			pinyin: 'hangzhou',
			initial: 'H',
			// latitude: 30.2741,
			// longitude: 120.1551
		},
		{
			id: 2483,
			parentId: 2482,
			adCode: '510100',
			name: '成都',
			pinyin: 'chengdu',
			initial: 'C',
			// latitude: 30.5728,
			// longitude: 104.0668
		},
		{
			id: 3044,
			parentId: 3043,
			adCode: '610100',
			name: '西安',
			pinyin: 'xian',
			initial: 'X',
			// latitude: 34.3416,
			// longitude: 108.9398
		},
		{
			id: 1827,
			parentId: 1826,
			adCode: '420100',
			name: '武汉',
			pinyin: 'wuhan',
			initial: 'W',
			// latitude: 30.5928,
			// longitude: 114.3055
		},
		{
			id: 867,
			parentId: 866,
			adCode: '320100',
			name: '南京',
			pinyin: 'nanjing',
			initial: 'N',
			// latitude: 32.0603,
			// longitude: 118.7969
		},
		{
			id: 1956,
			parentId: 1955,
			adCode: '430100',
			name: '长沙',
			pinyin: 'changsha',
			initial: 'C',
			// latitude: 28.1940,
			// longitude: 112.9822
		},
	];


	async function getAllArea() {
		const result = await allArea.areaList({
			depth: 2
		})
		cities.value = result.data
	}
	// 城市数据
	onMounted(() => {
		getAllArea()

		// 获取用户位置
		//getUserLocation();
		isLoading.value = true;
	});

	// 按首字母分组城市
	const groupedCities = computed(() => {
		const groups = {};

		// 排序城市 - 添加安全检查
		const sortedCities = [...cities.value].sort((a, b) => {
			const initialA = a?.initial || '';
			const initialB = b?.initial || '';
			return initialA.localeCompare(initialB);
		});

		// 分组
		sortedCities.forEach(city => {
			if (!groups[city.initial]) {
				groups[city.initial] = [];
			}
			groups[city.initial].push(city);
		});

		return groups;
	});
	// 调用微信小程序API获取用户位置
	const getUserLocation = () => {
		isLoading.value = true;

		// 微信小程序获取位置
		wx.getLocation({
			type: 'gcj02', // 火星坐标系
			success: (res) => {
				console.log('获取位置成功', res);
				// 使用逆地址解析获取城市名称
				getCityName(res.latitude, res.longitude);
			},
			fail: (err) => {
				console.error('获取位置失败', err);
				isLoading.value = false;
				currentCity.value = '定位失败，请选择';

				// 如果是用户拒绝授权，可提示打开设置
				if (err.errMsg.includes('auth deny')) {
					wx.showModal({
						title: '提示',
						content: '请授权位置信息以获取当前城市',
						success: (modalRes) => {
							if (modalRes.confirm) {
								wx.openSetting();
							}
						}
					});
				}
			}
		});
	};
	// 逆地址解析获取城市名称
	const getCityName = (latitude, longitude) => {
		// 调用微信小程序的逆地理编码API
		wx.chooseLocation({
			latitude,
			longitude,
			success: (res) => {
				isLoading.value = false;
				console.log('地址解析成功', res);
				// 从地址中提取城市名称
				const city = extractCityFromAddress(res.address);
				currentCity.value = city || res.city;
			},
			fail: (err) => {
				console.error('地址解析失败', err);
				isLoading.value = false;
				currentCity.value = '未知城市';
			}
		});
	};

	// 从地址中提取城市名
	const extractCityFromAddress = (address) => {
		// 简单的城市提取逻辑，实际项目可能需要更复杂的处理
		const cityRegex = /(省|市|自治区|特别行政区|自治州|盟)([^省市区自治州盟]+)(市|区|县|镇)/;
		const match = address.match(cityRegex);
		return match ? match[2] : '';
	};

	// 切换城市列表显示状态
	const toggleCityList = () => {
		isCityListOpen.value = !isCityListOpen.value;
	};

	// 选择城市
	const selectCity = async (city) => {
		currentCity.value = city.name;
		isCityListOpen.value = false;
		isLoading.value = true;
		try {
			// 更新定位数据中的城市信息
			locationData.name = city.name;
			
			// 保存更新后的定位数据到本地存储
			uni.setStorageSync('locationData', { ...locationData });
			
			// 触发城市选择事件，供父组件使用
			emit('citySelected', city);
			
			// 设置当前城市下的推文，传递城市ID供服务器查询
			await getArticleByAreadId(city.id);
		} catch (error) {
			console.error('选择城市失败:', error);
			// 显示错误提示
			uni.showToast({
				title: '切换城市失败，请稍后重试',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
		}
	};

	async function getArticleByAreadId(id) {
		//获取某个城市的全部文章
		const artList1 = await articleStore.articleListByArea({
			// latitude: locationData.latitude,
			// longitude: locationData.longitude,
			latitude: '',
			longitude: '',
			page: pageData.pageNo,
			pageSize: 10,
			source: '',
			areaId: id
		});
		allArticles.value = artList1.data.objects
		artList.value = artList1.data.objects
	}

	// 定义组件事件
	const emit = defineEmits(['citySelected']);

	// 标签列表，初始化为空数组
	const list = ref([]);
	const currentLabelName = ref('');
	const pageData = reactive({
		pageNo: 1,
		pageSize: 10
	});

	const locationData = reactive({
		name: "定位中...",
		longitude: null,
		latitude: null
	})

	//单个tab的瀑布流数据
	let tabList = ref(list[0])
	// tab切换的动画控制
	const show = ref(true);
	// tab切换事件
	const tabClick = (item) => {
		tabList.value = list[item.index]
	}

	// 获取城市
	/*  #ifdef  MP-WEIXIN  */
	const citySelector = requirePlugin('citySelector');

	//返回上一页时造成定位丢失,将本地存储的定位数据添加
	uni.onAppRoute(route => {
		const {
			name
		} = uni.getStorageSync("locationData")
		if (name) {
			locationData.name = name
		}
	});
	/* #endif */


	//点击定位
	/* const onClickToMap = () => {
	
		let referer = 'aaa';
		const hotCitys = '北京,上海,天津,重庆,广州,深圳,成都,杭州'
		let endPoint = JSON.stringify({ //终点
			'name': '',
			'latitude': locationData.lat,
			'longitude': locationData.log,
		});
		wx.navigateTo({
			url: `plugin://citySelector/index?key=${MAP_KEY}&referer=${referer}&hotCitys=${hotCitys}`,
		}) 
	}*/



	//获取定位信息
	onShow(async () => {
		try {
			let res
			/*  #ifdef  MP-WEIXIN  */
			const selectedCity = citySelector.getCity();
			if (selectedCity) {
				locationData.name = selectedCity?.name
				locationData.longitude = selectedCity?.location?.longitude
				locationData.latitude = selectedCity?.location?.latitude
				res = {
					longitude: locationData.longitude,
					latitude: locationData.latitude
				}
				uni.setStorageSync('locationData', {
					...locationData
				})
			}
			/*  #endif  */
			try {
				if (!res) {
					res = await uni.getLocation({
						type: 'wgs84',
					});
				}
			} catch (error) {
				uni.showToast({
					title: '定位获取异常'
				})
				locationData.name = '北京';
				res = {
					longitude: 116.4074,
					latitude: 39.9042
				}
			}

			// 为不同平台设置位置数据
			locationData.latitude = res?.latitude
			locationData.longitude = res?.longitude

			/*  #ifdef  H5  */
			try {
				const h5LocaRes = await uni.request({
					url: `/ws/geocoder/v1/?location=${res?.latitude},${res?.longitude}&key=${MAP_KEY}`,
				})
				locationData.name = h5LocaRes?.data?.result?.ad_info?.city || '北京';
				currentCity.value = h5LocaRes?.data?.result?.ad_info?.city || '北京';
			} catch (error) {
				console.error('H5定位解析失败:', error);
				locationData.name = '北京';
				currentCity.value = '北京';
			}
			/* #endif */

			/*  #ifdef  MP-WEIXIN  */
			try {
				const qqmapsdk = new QQMapWX({
					key: MAP_KEY
				});
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: res?.latitude,
						longitude: res?.longitude
					},
					success({
						result
					}) {
						locationData.name = result?.address_component?.city || '北京'
						uni.setStorageSync('locationData', {
							...locationData
						})
					},
					fail(error) {
						console.log("位置解析失败", error);
					}
				})
			} catch (error) {
				console.error('微信地图解析失败:', error);
			}
			/* #endif */

			// 初始化标签和文章数据
			await getArticleLabel()
			// 如果第一个标签是'全部'，则不设置分类筛选条件
			currentLabelName.value = list.value[0]?.name === '全部' ? '' : list.value[0]?.name
			await getArticleData('init')
		} catch (error) {
			console.error('初始化失败:', error);
			// 显示错误提示
			uni.showToast({
				title: '初始化失败，请稍后重试',
				icon: 'none'
			});
		}
	})


	// 剩余
	const show_remain = () => {

		if (show_remain_data.value.length === 0) {

			show_remain_data.value = list.value.slice(show_tag_number)
			return
		} else {
			show_remain_data.value = []
		}
	}




	//------------从后端获取数据   async function handleCategoryClick (item)  {
	async function fetchData() {
		//const fetchData = async () => {
		try {
			listLoading.value = true;

			//获取分类信息
			const artRes = await articleCategoryStore.articleCategoryList({
				categoryStatus: 0,
				page: 1,
				pageSize: 100
			});
			show_remain_data.value = artRes.data.objects;

			//获取全部文章---启用--上线
			const artList1 = await articleStore.articleList({
				status: 1, //上线
				articleStatus: 1, //启用
				// latitude: locationData.latitude,
				// longitude: locationData.longitude,
				page: pageData.pageNo,
				pageSize: 10,
				source: 2,

			});
			allArticles.value = artList1.data.objects
			//获取全部的城市
			//const allArea = await 

		} catch (error) {
			console.error('文章获取失败:', error);
			// 显示错误提示
			uni.showToast({
				title: '获取文章分类失败',
				icon: 'none'
			});
		} finally {
			listLoading.value = false;
		}
	};

	//处理分类点击事件   
	const handleCategoryClick = (item) => {
		listLoading.value = true;
		if (item == 0) {
			artList.value = allArticles.value
		} else {
			activeCategoryId.value = item.id
			//根据分类显示文章
			artList.value = allArticles.value.filter(article =>
				article.articleCategoryId === item.id
			);
		}

		listLoading.value = false;
	};

	//监听器！！！
	watchEffect(() => {
		/* if (locationData.latitude!=null && locationData.longitude!=null) {
			//用户定位上报
			 await shopStore.shopLocation({
				latitude: locationData.latitude,
				longitude: locationData.longitude
			}) 
			
			//await getArticleLabel()
			//currentLabelName.value = list.value[0]?.name
			//await getArticleData('init')
		}
		//分类
		/* const artRes =await articleCategoryStore.articleCategoryList({
			categoryStatus:0,
			page: 1,
			pageSize: 100
		}); */
		//console.log(artRes)
		//show_remain_data.value=artRes.data.objects; */


		if (allArticles.value.length > 0 && activeCategoryId.value === null) {
			artList.value = [...allArticles.value];
		}

	})

	//初始化加载数据
	fetchData();
	//点击文章分类展示文章
	/* async function handleCategoryClick (item)  {
		
		//window.location.reload();
		//获取文章列表
		const artRes = await articleStore.articleList({
			articleCategoryId:item.id,
			latitude: locationData.latitude,
			longitude: locationData.longitude,
			page: pageData.pageNo,
			pageSize: 10,
			source: 2
		})
		
		console.log(artRes.data.objects)
		artList = artRes.data.objects
	} */

	async function getArticleData(init) {
		uni.showLoading({
			title: '列表数据加载中...'
		})
		if (init) {
			pageData.pageNo = 1
		}

		//获取文章列表
		const artRes = await articleStore.articleList({
			articleStatus: 1,
			status: 1,
			// latitude: locationData.latitude,
			// longitude: locationData.longitude,
			page: pageData.pageNo,
			pageSize: 10,
			source: 2,
			articleLabel: currentLabelName.value
		}, init)
		listLoading.value = false
		uni.hideLoading()
		//console.log(artRes.data.objects)
		artList.value = artRes.data.objects
	}

	async function getArticleLabel() {
		try {
			const res = await articleStore.articleLabel({
				latitude: locationData.latitude,
				longitude: locationData.longitude,
				page: 1,
				pageSize: 100,
				source: 2
			})
			// 如果从服务器获取成功且有数据，使用服务器数据
			if (res?.data && res.data.length > 0) {
				// 在标签列表前面添加 '全部' 选项
				list.value = [{
					name: '全部'
				}, ...res.data.map((item) => ({
					name: item
				}))]
			} else {
				// 如果服务器没有返回数据，使用默认标签
				list.value = [{
					name: '全部'
				}, ...['美食', '旅游', '购物'].map(name => ({
					name
				}))]
				// 显示提示信息
				uni.showToast({
					title: '使用默认标签',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('获取标签失败:', error)
			// 发生错误时，使用默认标签
			list.value = [{
				name: '全部'
			}, ...['美食', '旅游', '购物'].map(name => ({
				name
			}))]
			// 显示错误提示
			uni.showToast({
				title: '获取标签失败，使用默认标签',
				icon: 'none'
			})
		}
	}
	// 获取屏幕宽度
	const {
		windowWidth,
		windowHeight
	} = uni.getSystemInfoSync();
	// const show_tag_number = Math.ceil(windowWidth / 70)

	// 初始化用户列表展示
	const show_init_list = computed(() => {
		return list.value.slice(0)
	})

	const clickLabel = (item) => {
		// 当点击 '全部' 选项时，将 currentLabelName 设置为空字符串，表示不筛选
		currentLabelName.value = item.name === '全部' ? '' : item.name
		getArticleData('init')
	}

	const scrollState = computed(() => {
		return pageData.pageNo < articleStore.articleListData.totalPage
	})

	onReachBottom(throttle(() => {
		if (scrollState) {
			pageData.pageNo++
			getArticleData()
		}
	}, 500))

	const time = ref(3)
	const timer = ref(null)
	const showpop = ref(false) //关闭首页广告
	timer.value = setInterval(() => {
		time.value = time.value - 1
		if (time.value === 0) {
			showpop.value = false;
			clearInterval(timer.value)
		}
	}, 1000)

	const jumpTime = function() {
		showpop.value = false;
		clearInterval(timer.value)
	}
</script>
<style scoped lang="scss">
	.city-selector {
		position: relative;
	}

	/* 当前城市样式 */
	.current-city {
		display: inline-flex;
		align-items: center;
		padding: 8px 12px;
		background-color: #f5f5f5;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		color: #333;
	}

	.arrow-icon {
		margin-left: 6px;
		transition: transform 0.3s ease;
	}

	.arrow-icon.rotate {
		transform: rotate(180deg);
	}

	/* 城市列表样式 */
	.city-list-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
	}

	.city-list-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.city-list-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		max-height: 80vh;
		overflow-y: auto;
	}

	.city-list-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.city-list-header h3 {
		margin: 0;
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.close-btn {
		position: absolute;
		right: 16px;
		background: none;
		border: none;
		font-size: 24px;
		color: #999;
		cursor: pointer;
		padding: 4px;
		line-height: 1;
	}

	/* 热门城市样式 */
	.hot-cities {
		padding: 16px;
	}

	.hot-cities h4,
	.all-cities h4 {
		margin: 0 0 12px 0;
		font-size: 16px;
		color: #666;
	}

	.city-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.city-tag,
	.city-item {
		padding: 6px 16px;
		background-color: #f5f5f5;
		border-radius: 16px;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.city-tag:hover,
	.city-item:hover {
		background-color: #e8f4fd;
		color: #1677ff;
	}

	/* 全部城市样式 */
	.all-cities {
		padding: 0 16px 16px;
	}

	.city-group {
		margin-bottom: 16px;
	}

	.group-index {
		font-size: 14px;
		color: #999;
		margin: 12px 0 8px;
		padding-left: 4px;
	}

	.group-cities {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 12px;
	}

.show-pop {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #000;
		color: #fff;
		z-index: 99999;
	}

	.text-pop {
		position: absolute;
		display: flex;
		justify-content: space-around;
		top: 100rpx;
		left: 40rpx;
		background: #000;
		/* border: 1px solid #fff; */
		border-radius: 15px;
		width: 80px;
		height: 35px;
		line-height: 70rpx;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.u-sticky {
		top: 0 !important;
	}

	.empty-tip {
		margin-top: 100rpx;
		text-align: center;
		color: #ccc;
	}

	.tabs {
		position: sticky;
		background-color: white;
	}

	.p0 {
		background-color: white;
	}

	.p2 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 20rpx;

		.location {
			display: flex;
			align-items: center;
			margin-right: 25rpx;
		}

		.search {
			max-width: 700rpx;
			min-width: 460rpx;
		}
	}

	.show_remain {
		display: flex;
		align-items: center;
	}

	.show_remain_child {
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.loading {
		text-align: center;
		padding: 20rpx 0;
		color: #999;
	}
</style>